<template>
	<view class="periodSetupCard">
		<view class="content">
			{{setup.content}}
		</view>
		<view class="card">
			<view class="card-head">
				<view class="img">
					<img :src="setup.img" alt="">
				</view>
				<view class="title">
					{{setup.title}}
				</view>
			</view>
			<picker @change="handleChange" :value="setup.day.slice(0,-1)-(setup.id==1?3:17)" :range="setup.dayList"
				class="card-foot">
				<view class="day">
					{{setup.day}} >
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name: "periodSetupCard",
		data() {
			return {};
		},
		props: {
			setup: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			handleChange(e) {
				if (this.setup.id == 1)
					this.$emit("change1", this.setup.dayList[e.detail.value])
				else
					this.$emit("change2", this.setup.dayList[e.detail.value])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.periodSetupCard {
		margin-bottom: 30rpx;

		.content {
			color: #c4c4c4;
			margin-bottom: 20rpx;
		}

		.card {
			display: flex;
			justify-content: space-between;

			.card-head {
				display: flex;
				align-items: center;

				.img {
					margin-right: 20rpx;

					img {
						width: 70rpx;
						height: 70rpx;
					}

				}
			}

			.card-foot {
				display: flex;
				align-items: center;
				color: #c4c4c4;
			}
		}
	}
</style>